<template>
    <div class="loginIn">
        <img src="https://gw.alicdn.com/tfs/TB1puqzr6MZ7e4jSZFOXXX7epXa-160-160.png" alt="" class="logo">
        <div class="InputBox">
            <div class="user">
                <input type="text" placeholder="手机号/邮箱/账号名" @input="funUser" v-model="user">
            </div>
            <div class="code">
                <input :type="txt" placeholder="请输入登录密码" @input="funPwd" v-model="pwd">
                <van-icon name="eye-o" size="0.4rem" @click="funflag" v-show="!flagPwd" />
                <van-icon name="closed-eye" size="0.4rem" @click="funflag" v-show="flagPwd" />
            </div>
            <aside @click="funCode">短信验证码登录</aside>
            <button :disabled="!flagLogin" :class="{ bgc: !flagLogin }" @click="funLogin">登录</button>
            <section>
                <van-checkbox v-model="checked" icon-size="0.3rem" @click="funCheck"  checked-color="#ff5000"></van-checkbox>
                <p>
                    已阅读并同意以下协议
                    <a href="https://terms.alicdn.com/legal-agreement/terms/TD/TD201609301342_19559.html"
                        target="_blank">淘宝平台服务协议</a>
                    、
                    <a href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html"
                        target="_blank">隐私权政策</a>
                    、
                    <a href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201811121436_80276.html"
                        target="_blank">法律声明</a>
                    、
                    <a href="https://render.alipay.com/p/f/fd-jm7jym6r/alipay/multi-agreement.html"
                        target="_blank">支付宝及客户端服务协议</a>
                    ，未注册手机号将自动为您创建账号。
                </p>
            </section>
        </div>
    </div>
</template>

<script>
export default {
    name: "loginInput",
    data() {
        return {
            checked: false,
            flagPwd: true,
            txt: "password",
            flagLogin: false,
            flagUser: false,
            user: "",
            pwd: "",

        }
    },
    methods: {
        funCode() {
            this.$router.push("/loginCode")
        },
        funflag() {
            this.flagPwd = !this.flagPwd
            if (this.txt == "text") {
                this.txt = "password"
            } else {
                this.txt = "text"
            }
        },
        // 用户名输入
        funUser() {
            // 自运行
            (this.debouce()())
        },
        funTestTel() {
            let regUser = /^1[3-9]\d{9}$/
            if (regUser.test(this.user)) {
                this.flagUser = true
            } else {
                this.flagUser = false
                this.flagLogin = false
            }
        },
        // 防抖
        debouce() {
            return () => {
                if (this.timer) {
                    clearInterval(this.timer)
                }
                this.timer = setTimeout(() => {
                    this.funTestTel()
                }, 200)
            }
        },
        // 密码输入
        funPwd() {
            let regPwd = /^\d{5}$/
            if (regPwd.test(this.pwd) && this.flagUser && this.checked) {
                this.flagLogin = true
            } else {
                this.flagLogin = false
            }
        },
        // 必读选择
        funCheck() {
            if (this.flagUser && this.checked) {
                this.flagLogin = true
            } else {
                this.flagLogin = false
            }
        },
        // 点击登录
        funLogin() {
            this.$http({
                url: `http://localhost:3000/user`,
                methods: "get"
            }).then(res => {
                let arr = res.data
                let x = arr.find(v => v.tel == this.user)
                if (x) {
                    if (x.pwd == this.pwd) {
                        console.log("登录成功")
                        if (localStorage.getItem("token")) {
                            this.$router.push("/")
                        } else {
                            localStorage.setItem("token", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0ZWwiOiIxODczMzE3OTcwOCIsImlhdCI6MTY3NTYxMjIzNiwiZXhwIjoxNjc2OTA4MjM2fQ.48n823ysZpXeku8mh3GZyMg31ZWBGiPI0MbIzZZcQNY")
                            this.$router.push("/")
                        }
                    } else {
                        console.log("密码错误")
                    }
                } else {
                    console.log("用户名不存在，请通过短信验证登录")
                }
            })
        }

    }
}
</script>

<style lang="scss" scoped>
.loginIn {
    width: 100%;
    height: calc(100vh - 1.04rem);
    background: #fff;
}

.loginIn .logo {
    display: block;
    margin: 0 auto 0.9rem;
    width: 1.6rem;
    height: 1.6rem;
    text-align: center;
}

.loginIn .InputBox {
    width: 6.73rem;
    margin: auto;
}

.loginIn .InputBox .user {
    width: 100%;
    height: 0.51rem;
    box-sizing: border-box;
    border-bottom: 0.01rem solid #ff9666;
    margin-bottom: 0.8rem;
}

.loginIn .InputBox .user input {
    height: 0.45rem;
    padding-left: 0.1rem;
    font-size: 0.3rem;
}

.loginIn .InputBox .code {
    width: 100%;
    height: 0.51rem;
    box-sizing: border-box;
    border-bottom: 0.01rem solid #ff9666;
    margin-bottom: 0.45rem;
    display: flex;
    justify-content: space-between;
}

.loginIn .InputBox .code input {
    height: 0.45rem;
    padding-left: 0.1rem;
    font-size: 0.3rem;
}

.loginIn .InputBox .code span {
    color: #ff5000;
    font-size: 0.3rem;
}

.loginIn .InputBox aside {
    width: 2rem;
    color: #555560;
    font-size: 0.28rem;
    margin-bottom: 0.74rem;
}

.loginIn .InputBox button {
    width: 100%;
    height: 0.92rem;
    background: linear-gradient(45deg, #ff8e00, #ff5100);
    border: 0;
    border-radius: 0.41rem;
    color: #fff;
    font-size: 0.34rem;
    margin-bottom: 0.32rem;
}

.loginIn .InputBox .bgc {
    opacity: 0.5;
}

.loginIn .InputBox section {
    display: flex;
    justify-content: space-between;
    font-size: 0.26rem;
}

.loginIn .InputBox section .van-checkbox {
    width: 0.3rem;
    height: 0.3rem;
}

.loginIn .InputBox section p {
    width: 6.15rem;
}

.loginIn .InputBox section p a {
    color: #ff5000;
}

::-webkit-input-placeholder {
    color: #757575;
    font-size: 0.32rem;
}
</style>